<template>
  <div class="app-container">
    <div class="table-container">
      <Pagetitle
        name="新增角色"
        btnName="btnFun"
        @btnFun="addModal = true"
      ></Pagetitle>
      <Table :loading="isLoading" :columns="columns1" :data="roleList">
        <template slot-scope="{ row, index }" slot="action">
          <Button 
            type="primary" 
            size="small"
            @click="editAuthority(row, index)"
          >更改权限</Button>
        </template>
      </Table>
    </div>
    <Drawer
      :isShowTree.sync="isShowTree"
      :treeList="treeList"
      :checkedKeys.sync="checkedKeys"
      :roleInfo="roleInfo"
    ></Drawer>
    <AddRole
      :addModal.sync="addModal"
      @addRoleSuccess="addRoleSuccess"
    ></AddRole>
  </div>
</template>

<script>
import { Pagetitle } from "@/components";
import { getRoleAll } from '@/api/permission'
import Drawer from '../components/Drawer.vue'
import AddRole from '../components/addRole.vue'
import format from "date-format";
export default {
  data() {
    return {
      isShowTree: false,
      columns1: [
        {
          title: '角色',
          key: 'roleName',
          align: "center"
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              format("yyyy-MM-dd hh:mm:ss", new Date(params.row.createTime))
            );
          }
        },
        {
          title: '更新时间',
          key: 'updateTime',
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              format("yyyy-MM-dd hh:mm:ss", new Date(params.row.updateTime))
            );
          }
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      // 角色列表
      roleList: [],
      // 所有权限列表
      treeList: [], 
      // 回显已存在的权限
      checkedKeys: [],
      // 修改权限角色信息
      roleInfo: {},
      isLoading: false,
      addModal: false,
    }
  },
  components: {
    Pagetitle,
    Drawer,
    AddRole
  },
  mounted(){
    this.roleAll()
  },
  methods: {
    async roleAll() {
      this.isLoading = true
      try {
        const { data = {}} = await getRoleAll()
        this.roleList = data.sysall
        this.treeList = data.all
      } catch (err) {
        return
      }
      this.isLoading = false
    },
    addRoleSuccess() {
      this.roleAll()
    },
    editAuthority(row, index) {
      this.roleInfo.name = row.roleName
      this.roleInfo.id = row.id
      row.sysPermissionDtoList.forEach(item => {
        item.sysPermissionList.forEach(sub => {
          this.checkedKeys.push(sub.id)
        })
      })
      this.isShowTree = true
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-drawer__wrapper {
  background-color: rgba(0, 0, 0, .3);
}
/deep/ .el-drawer__header {
  font-size: 20px;
}
/deep/ .el-drawer__body {
  margin: 0 30px;
}
</style>